{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>猫猫百科</title>
    <link href="{% static 'pet/bootstrap5/css/bootstrap.min.css' %}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="{% static 'pet/layui/css/layui.css' %}">
    <style>
        .nav {
            background-color: #CC9999;
            height: 64px;
            padding: 0 125px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .nav-menu {
            margin-left: -200px;
            font-size: 18px;
            background-color: #CC9999;
        }

        .nav-menu a {
            font-size: 18px;
        }

        .layui-nav .layui-this:after, .layui-nav-bar {
            height: 3px;
            background-color: #0dcaf0;
        }

        .menu div {
            margin: 0 12px;
            color: white;
        }

        .info {
            display: flex;
        }

        .info div {
            margin: 0 8px;
            color: white;
        }

        .logo {
            margin-left: 30px;
            height: 64px;
            width: 30px;
        }

        .main {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .main .head {
            margin: 20px 0;
            font-size: 24px;
            color: #146c43;
        }

        .layer {
            padding: 20px;
            align-items: flex-start;
            display: none;
        }
    </style>
</head>
<body>
<div class="nav">
    <div class="logo">
        <img src="{% static 'pet/image/logo.png' %}" height="64">
    </div>
    <ul class="layui-nav nav-menu" lay-filter="">
        <li class="layui-nav-item "><a href="http://127.0.0.1:8000/pet/index">首页</a></li>
        <li class="layui-nav-item layui-this"><a href="http://127.0.0.1:8000/pet/cat">猫猫百科</a></li>
        <li class="layui-nav-item"><a href="http://127.0.0.1:8000/pet/dog">狗狗百科</a></li>
        <li class="layui-nav-item"><a href="http://127.0.0.1:8000/pet/pet">鼠鼠百科</a></li>
    </ul>
    <div class="info">
    </div>
</div>
<div class="main">
    <div style="position: absolute;left: 100px;top:120px">
        <button type="button" onclick="add()" class="layui-btn layui-btn-primary layui-btn-sm layui-btn-radius">
            <i class="layui-icon">&#xe654;</i>
        </button>
    </div>
    <div class="head">
        猫猫百科
    </div>
    <div style="display: flex">
        <hr class="layui-border-green" style="width: 100px">
        <span style="margin: 0 10px;color: #13c2c2">岁月静好，只因有喵</span>
        <hr class="layui-border-green" style="width: 100px">
    </div>
    <div class="content" style="width: 100%">
        <div id="contentBox" style="width: 1224px;height: 100%;margin: 10px auto;display: flex;flex-wrap: wrap">
            {% for item in cat_list %}
                <div id="{{ forloop.counter }}" style="width: 286px;height: 176px;position: relative;
                        background-image: url({% static item.picture %});background-size: cover;margin-bottom: 20px;margin-right: 10px;margin-left: 10px;border-radius: 4px;padding: 15px">
                    <div>
                        <span class="layui-badge layui-bg-black">猫猫百科</span>
                        <div class="layui-btn-group" style="float: right">
                            <button type="button" class="layui-btn layui-btn-sm" onclick="edit({{ item.id }})"
                                    style="background-color: rgba(0,0,0,0.5)">
                                <i class="layui-icon">&#xe642;</i>
                            </button>
                            <button type="button" class="layui-btn layui-btn-sm" onclick="del({{ item.id }})"
                                    style=" background-color: rgba(0,0,0,0.5)
                            ">
                            <i class="layui-icon">&#xe640;</i>
                            </button>
                        </div>
                    </div>
                    <div style="position: absolute;top: 136px;left: 0;background-color: rgba(0,0,0,0.3);width: 286px;height: 40px;color: white;line-height: 40px;text-align: center">{{ item.name }}
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>

    <div id="layer" class="layer">
        <div class="image" style="width: 286px;height: 176px;margin-right: 20px">
            <img id="layerImage"
                 style="width: 286px;height: 176px;object-fit: cover;object-position: top">
        </div>
        <div class="content">
            <div style="display:flex;margin-bottom: 10px">
                <div style="width: 240px">别名：<span id="alias"></span></div>
                <div>原产地：<span id="origin"></span></div>
            </div>
            <div style="display: flex">
                <div style="width: 240px;margin-bottom: 10px">寿命：<span id="lifetime"></span></div>
                <div>价格：<span id="price"></span></div>
            </div>
            <div>生活习性：<span id="habit" style="line-height: 24px"></span>
            </div>
        </div>

    </div>

</div>
<script src="{% static 'pet/layui/layui.js' %}">
</script>
<script>
    const add = function () {
        window.location.href = 'http://127.0.0.1:8000/pet/cat_add/'
    }
    const edit = function (id) {
        window.location.href = `http://127.0.0.1:8000/pet/cat_edit?id=${id}`
    }
    const del = function (id) {
        window.location.href = `http://127.0.0.1:8000/pet/cat_del?id=${id}`
    }
    let contentBox = document.getElementById('contentBox')
    const toDetail = function (e) {
        console.log(e)
        let cat_list = {{ cat_list|safe }};
        let imgSrc = cat_list[e.target.id - 1].picture
        const layerD = document.getElementById('layer')
        layerD.style.display = 'flex'
        document.getElementById('layerImage').src = '{% static '' %}' + imgSrc
        document.getElementById('alias').innerText = cat_list[e.target.id - 1].another_name
        document.getElementById('origin').innerText = cat_list[e.target.id - 1].area_of_origin
        document.getElementById('lifetime').innerText = cat_list[e.target.id - 1].lifetime
        document.getElementById('price').innerText = cat_list[e.target.id - 1].price
        document.getElementById('habit').innerText = cat_list[e.target.id - 1].habit
        layui.use('layer', function () {
            let $ = layui.$
            let layer = layui.layer;
            layer.open({
                type: 1,
                area: '900px',
                title: [cat_list[e.target.id - 1].name, 'font-size:21px;margin-top:10px'],
                content: $('#layer'),
                end: function () {
                    layerD.style.display = 'none'
                }
            });
        });
    }
    contentBox.addEventListener("click", toDetail)
</script>
</body>
</html>